<template>
  <div id="container">
    <canvas id="canvas"></canvas>
    <div class="login">
      <div class="top">
        <img src="../../assets/login/login_logo.png" height="60" width="200">
        <span class="bg1"></span>
        <span class="bg2"></span>
      </div>
      <div class="bottom">
        <form class="layui-form" id="gougu-login">
          <lay-form-item :label-width="0">
            <lay-input :allow-clear="true" prefix-icon="layui-icon-username" placeholder="用户名"
                       v-model="loginForm.username"></lay-input>
          </lay-form-item>
          <lay-form-item :label-width="0">
            <lay-input :allow-clear="true" prefix-icon="layui-icon-password" placeholder="密码" password
                       type="password" v-model="loginForm.password"></lay-input>
          </lay-form-item>
          <lay-form-item :label-width="0">
            <div style="display: flex">
              <div style="width: 158px; display: inline-block">
                <lay-input :allow-clear="true" prefix-icon="layui-icon-vercode" placeholder="验证码"
                           v-model="loginForm.captcha"></lay-input>
              </div>
              <div class="login-captach" @click="toRefreshImg" style="width:142px; height:44px; margin-right:0">
                <img style="width: 100%;height:44px;margin-left: 10px" :src="verificationImgUrl"  alt="获取验证码" />
              </div>
            </div>
          </lay-form-item>
          <lay-form-item :label-width="0">
            <lay-button type="primary" style="border-color:#FF6347"  :loading="loging" :fluid="true"
                        loadingIcon="layui-icon-loading" @click="loginSubmit">登录</lay-button>
          </lay-form-item>
        </form>
      </div>
    </div>
    <div class="foot">
      © 2022 oa.luyifushi.cn license ，路依OA - v4.92.10
    </div>
  </div>
</template>

<script lang="ts">
import { login } from '../../api/module/user'
import { verificationImg} from '../../api/module/commone'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../../store/user'
import { layer } from '@layui/layer-vue'

export default defineComponent({
  setup() {
    const router = useRouter()
    const userStore = useUserStore()
    const method = ref('1')
    const verificationImgUrl = ref('')
    const loging = ref(false);
    const loginForm = reactive({
      username: 'admin',
      password: 'lyfs12345',
      captcha: '',
      captcha_id:"",
    })

    onMounted(() => {
      toRefreshImg()
    })

    const loginSubmit = async () => {
      loging.value = true;
      login(loginForm).then(({ data, code, msg }) => {
        loging.value = false;
        if (code == 200) {
          layer.msg("登录成功", { icon: 1 }, async () => {
            userStore.token = data.token
            await userStore.loadMenus()
            await userStore.loadPermissions()
            router.push('/')
          })
        } else {
          layer.msg(msg, { icon: 2 })
        }
      })
    }

    const toRefreshImg =  () => {
       verificationImg().then(({ data, code, msg })=>{
         if (code == 200) {
           verificationImgUrl.value = 'data:image/png;base64,'+data.img
           loginForm.captcha_id = data.captcha_id
           console.log(verificationImgUrl)
         } else {
           layer.msg(msg, { icon: 2 })
         }
       })
    }

    return {
      toRefreshImg,
      loginSubmit,
      loginForm,
      method,
      loging,
      verificationImgUrl
    }
  }
})
</script>

<style scoped>
html,body {width: 100%;height: 100%;background: #EAF3FF;}
canvas{display:block;width:100%;height:100%; position: fixed; top: 0;left: 0;}
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
}
#container {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 999;color: #ffffff;
  background: url(../../assets/login/bg.png);
  background-size: cover;
}
.container h2 {font-size: 36px;padding: 36px 0;font-weight: 500;}
.login {width: 360px;text-align: center;position: absolute;top: 50%;left: 50%;margin-top: -240px;margin-left: -180px;border-radius: 12px;box-shadow: 0 2px 6px rgba(92, 110, 136, .32);}
.login .top {width: 360px;height: 117px;background-color: #fbbc05;border-radius: 12px 12px 0 0;line-height: 117px;text-align: center;overflow: hidden;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
.login .top .bg1 {display: inline-block;width: 72px;height: 72px;background: #fff;opacity: .1;border-radius: 0 72px 0 0;position: absolute;left: 0;top: 42px;}
.login .top .bg2 {display: inline-block;width: 92px;height: 92px;background: #fff;opacity: .1;border-radius: 50%;position: absolute;right: -16px;top: -16px;}
.login .bottom {background-color: #fff;padding:26px 24px;border-radius: 0 0 12px 12px;}

.layui-input,.layui-textarea {height: 44px;border: 1px solid #ddd;}
.captcha_img img{width:142px; height:44px; cursor:pointer;}
.layui-btn {height: 45px;font-size: 16px;margin-top: 6px;background-color: #FF6347!important}
.foot {position: absolute; font-size: 12px; bottom: 28px;text-align: center;width: 100%;color: #458BF3;}
</style>